<template>
    <div class="app-container">
        <el-card class="card-container" v-if="this.$route.query.type === 'message'">
            <div slot="header" class="card-header centered-title">
                账号信息
            </div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-row>
                        <el-col>
                            账号状态：{{ review() }}
                        </el-col>
                    </el-row>
                    <div v-for="(value, key) in form" :key="key" class="form-item">
                        <el-row>
                            <el-col>
                                <span v-if="vaild(key) === 0">{{ getFieldLabel(key, 1) }}：{{ value }}</span>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="card-container" v-if="this.$route.query.type === 'clockin'">
            <div slot="header" class="card-header centered-title" v-if="this.$route.query.type === 'clockin'">
                打卡详情
            </div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-row>
                        <el-col>
                            状态：{{ review() }}
                        </el-col>
                    </el-row>
                    <div v-for="(value, key) in form" :key="key" class="form-item">
                        <el-row>
                            <el-col>
                                <span v-if="vaild(key) == 0">{{ getFieldLabel(key, 1) }}：{{ value }}</span>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="card-container" v-if="this.$route.query.type === 'clockin'">
            <div slot="header" class="card-header centered-title">
                已打卡列表
            </div>
            <el-table :data="ans">
                <el-table-column label="用户名" align="center" key="username" prop="username" />
                <el-table-column label="用户id" align="center" key="userId" prop="userId" />
                <el-table-column label="用户类型" align="center" prop="usertype">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.szpt_user_type" :value="scope.row.usertype" />
                    </template>
                </el-table-column>
                <el-table-column label="打卡时间" align="center" key="createTime" prop="createTime" />
                <el-table-column label="电话号码" align="center" key="phonenumber" prop="phonenumber" />
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="ans.pageNum" :limit.sync="ans.pageSize"
                @pagination="getList" />
        </el-card>

        <el-card class="card-container" v-if="this.$route.query.type === 'message'">
            <div slot="header" class="card-header centered-title">
                党员信息
            </div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <img :src="this.form.photoUrl">
                    <div v-for="(value, key) in form" :key="key" class="form-item">
                        <el-row>
                            <el-col>
                                <span v-if="vaild(key) === 1">{{ getFieldLabel(key, 1) }}：{{ value }}</span>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
 
<script>
import api from "../../../api/management/api"
export default {
    dicts: ['szpt_status_enum', 'szpt_user_type'],
    data() {
        return {
            form: {},
            fieldLabels: {
                name: "姓名",
                gender: "性别",
                status: "状态(0:正常,1:停用)",
                createUser: "创建人",
                createTime: "创建时间",
                updateTime: "上一次更新",
                updateUser: "更新人",
                remark: "备注",
                dateOfBirth: "出生日期",
                ethnicity: "民族",
                nativePlace: "籍贯",
                maritalStatus: "婚姻状况",
                partyEntryTime: '入党时间',
                partyConfirmationTime: '入党确认时间',
                employmentStartDate: '就业开始时间',
                partyBranchAtEntry: '入党时所在党支部',
                partyBranchAtConfirmation: '确认时所在党支部',
                partyIntroducer: '党内介绍人',
                currentPartyBranch: '现所在党支部',
                partyBranchEntryDate: '党支部进入时间',
                currentPartyPosition: '现任党内职务',
                educationBackground: '学历',
                graduationSchoolMajor: '毕业院校及专业',
                employerPosition: '雇主职务',
                organizationRelationshipUnit: '单位关系所在单位',
                registeredResidence: '户籍地',
                currentResidence: '现居住地',
                idNumber: '身份证号码',
                contactNumber: '联系电话',
                qqOrWechat: 'QQ或微信号',
                outflowDate: '外流日期',
                destinationOfOutflow: '外流去向',
                typeOfOutflow: '外流类型',
                reasonForOutflow: '外流原因',
                activityCertificateNumber: '活动证号',
                contactWithPartyOrganization: '离党后是否与党组织保持联系',
                contactPersonAndDetailsOfOutflowBranch: '外流党支部联系人及联系方式',
                contactPersonAndDetailsOfInflowBranch: '流入党支部联系人及联系方式',
                placeOfInflowUnit: '流入单位',
                lostContactDate: '失联日期',
                dateOfDeparture: '外出日期',
                reasonForDeparture: '外出原因',
                contactWithOrganizationAfterDeparture: '外出后是否与组织保持联系',
                partyMembershipHandlingMethod: '党籍处理方式',
                dateOfReturn: '返回日期',
                resumptionOfOrganizationLife: '组织生活恢复情况',
                photoUrl: '照片链接',
            },
            data: {
                pageNum: "1",
                pageSize: "10",
                id: "",
            },
            ans: [],
            total: 0,
        };
    },
    mounted() {
        console.log(this.$route.query.row);
        this.form = this.$route.query.row;
        this.data.id = this.form.id;
        if (this.$route.query.type === "clockin") this.getList();
        // console.log(this.form.photoUrl);
        // if (this.$route.query.type === "message") console.log(this.$route.query.type);
    },
    methods: {
        getList() {
            api.checkin_finish_members(this.data).then((res) => {
                this.list = res.data.pageInfo.list;
                this.total = res.data.pageInfo.total;
                console.log(res);
                let tmp = {};
                for (let i = 0; i < this.list.length; i++) {
                    tmp.createTime = this.list[i].checkInMsg.createTime;
                    tmp.userId = this.list[i].user.userId;
                    tmp.username = this.list[i].user.userName;
                    tmp.phonenumber = this.list[i].user.phonenumber;
                    tmp.usertype = this.list[i].user.userType;
                    this.ans.push(tmp);
                }
            })
        },
        review() {
            return this.selectDictLabel(this.dict.type.szpt_status_enum, this.form.status);
        },
        vaild(key) {
            if (key == "id" || key == "createTime" || key == "updateTime" || key == "createUser" || key == "updateUser"
                || key == "remark") {
                return 0;
            }
            if (key == "photoUrl" || key == "status") return -1;
            return 1;
        },
        getFieldLabel(key, type) {
            return this.fieldLabels[key] || key;
        },
    },
};
</script>
  
<style scoped>
/* .app-container {
    display: flex;
}

.left-half-card {
    width: 50%;
} */
.inline-container {
    display: inline;
}

.app-container {
    display: flex;
    flex-direction: column;
    /* Added to render cards vertically */
}

.card-container {
    margin-bottom: 20px;
    /* Added spacing between cards */
}
</style>